<script setup lang="ts">
import { Sun, Moon } from 'lucide-vue-next'
import { useTheme } from '@/composables/useTheme'

// 仅解构实际使用到的接口，避免未使用变量
const { toggleTheme, isDark } = useTheme()

/**
 * 切换主题并添加视觉反馈
 */
const handleToggle = () => {
  toggleTheme()
}
</script>

<template>
  <button
    :class="[
      'relative p-2 rounded-full transition-all duration-300 group',
      'hover:scale-110 active:scale-95',
      'bg-gray-200 dark:bg-gray-800',
      'border border-gray-300 dark:border-gray-600',
      'hover:bg-gray-300 dark:hover:bg-gray-700',
      'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
      'dark:focus:ring-offset-gray-900'
    ]"
    :title="isDark ? '切换到亮色主题' : '切换到暗色主题'"
    @click="handleToggle"
  >
    <!-- 图标容器 -->
    <div class="relative w-5 h-5">
      <!-- 太阳图标 (亮色主题) -->
      <Sun
        :class="[
          'absolute inset-0 w-5 h-5 transition-all duration-300',
          'text-yellow-500',
          isDark ? 'opacity-0 rotate-90 scale-0' : 'opacity-100 rotate-0 scale-100'
        ]"
      />

      <!-- 月亮图标 (暗色主题) -->
      <Moon
        :class="[
          'absolute inset-0 w-5 h-5 transition-all duration-300',
          'text-blue-400',
          isDark ? 'opacity-100 rotate-0 scale-100' : 'opacity-0 -rotate-90 scale-0'
        ]"
      />
    </div>

    <!-- 发光效果 -->
    <div
      :class="[
        'absolute inset-0 rounded-full transition-all duration-300 opacity-0 group-hover:opacity-100',
        isDark
          ? 'bg-blue-400/20 shadow-lg shadow-blue-400/25'
          : 'bg-yellow-500/20 shadow-lg shadow-yellow-500/25'
      ]"
    />
  </button>
</template>

<style scoped>
/* 额外的动画效果 */
@keyframes theme-switch {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

.theme-switch-animation {
  animation: theme-switch 0.6s ease-in-out;
}
</style>
